<script setup>
import { reactive } from 'vue'
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/commonStore'
import { useUpdateNotice } from '@/store/super-manger/updateNoticeStore';
const commonStore = useCommonStore();
const { isShowCover, isShowAddNotice } = storeToRefs(commonStore)
const updateNotice = useUpdateNotice();
// const textarea = ref('');
const noticeForm = reactive({
    title: '',
    content: ''  
})  
// 取消按钮
const cancleBtn = () => {
    isShowCover.value = false
    isShowAddNotice.value = false
}
// 发布按钮
const submitBtn = async() => {
    console.log(noticeForm)
    // 发送网络请求
    await updateNotice.updateNoticeRequest(noticeForm);
    cancleBtn();
}
</script>

<template>
  <div class="add_notice">
    <div class="panel_title">发布公告</div>
    <el-input 
        v-model="noticeForm.title" 
        class="title" 
        placeholder="请输入公告标题" 
    />
    <el-input
        v-model="noticeForm.content"
        :rows="10"
        type="textarea"
        placeholder="请输入公告内容..."
        class="textarea"
        resize="none"
    />
    <div class="btns">
        <el-button type="success" @click="submitBtn">发布</el-button>
        <el-button @click="cancleBtn">取消</el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.add_notice {
    position: fixed;
    left: 500px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    border-radius: 10px;
    background-color: #fff;
    .panel_title {
        margin: 20px 0;
        font-size: 22px;
        font-weight: 600;
    }
    .title {
        margin-bottom: 20px;
        width: 90%;
    }
    .btns {
        margin: 20px 0;
    }

}
</style>